<template>
  <div>
    <NavBar
      :title="detail.name"
      :leftArrow="true"
      :clickLeft="() => $router.go(-1)"
    ></NavBar>
    <Step :active="detail.status - 1" />
    <Message type="order" :detail="detail" />
    <Address :detail="detail" />
    <div class="pilot">
      <div class="title">
        <span>飞手信息：</span>
        <van-button
          :disabled="detail.status === 5 || detail.status === 1"
          type="primary"
          size="mini"
          :to="`/taskPilot/${id}`"
          >飞手调度</van-button
        >
      </div>
      <Pilot :columns="columns" :tableData="pilotList">
        <template
          slot="address"
          slot-scope="{ row: { provinceName, cityName, areaName } }"
        >
          {{ `${provinceName}${cityName}${areaName}` }}
        </template>
        <template slot="phone" slot-scope="{ row: { phone } }">
          <!-- <a :href="`tel:${phone}`" rel="external nofollow" >{{ phone }}</a> -->
          <a
            v-clipboard:copy="phone"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            rel="external nofollow"
            >{{ phone }}</a
          >
        </template>
        <template slot="task" slot-scope="{ row }">
          <span style="color: #1976d2" @click="showTask(row)">{{
            row.task.length
          }}</span>
        </template>
        <template slot="main" slot-scope="{ row }">
          <img
            v-if="row.isMain === 1"
            src="@/assets/images/checked.png"
            alt=""
          />
          <span
            v-else
            style="color: #1976d2"
            :style="{ opacity: detail.status === 5 ? 0.5 : 1 }"
            @click="detail.status === 5 ? () => {} : setPilot(row)"
          >
            设为主飞手
          </span>
        </template>
        <template slot="operate" slot-scope="{ row }">
          <span
            style="color: #1976d2"
            :style="{ opacity: detail.status === 5 ? 0.5 : 1 }"
            @click="detail.status === 5 ? () => {} : handleDelPilot(row)"
            >取消选中</span
          >
        </template>
      </Pilot>
    </div>
    <van-dialog v-model="task.show" :title="`姓名${task.name}承接的任务有：`">
      <div v-for="item in task.data" :key="item.taskId" class="task-items">
        <span>{{ item.number }}</span>
        <span style="margin-left: 10px">{{ item.name }}</span>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import Step from "@/components/task/detail/Step";
import Message from "@/components/task/detail/Message";
import Address from "@/components/task/detail/Address";
import Pilot from "@/components/task/detail/Pilot";
import { Detail, TaskPilotList, TaskPilotEdit, TaskPilotDel } from "@/api/task";
import { Dialog, Toast } from "vant";
export default {
  components: {
    NavBar,
    Step,
    Message,
    Address,
    Pilot,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      id: undefined,
      detail: {},
      columns: [
        { title: "飞手姓名", prop: "name", width: "14%", align: "center" },
        { title: "区域", slot: "address", width: "26%", align: "center" },
        { title: "手机", slot: "phone", width: "18%", align: "center" },
        { title: "已承接任务", slot: "task", width: "14%", align: "center" },
        { title: "主飞手", slot: "main", width: "14%", align: "center" },
        { title: "操作", slot: "operate", width: "14%", align: "center" },
      ],
      pilotList: [],
      task: {
        show: false,
        name: "",
        data: [],
      },
    };
  },
  methods: {
    async getDetail() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      let { data } = await Detail(this.id);
      this.detail = data || {};
      Toast.clear();
    },
    async getTaskPilotList() {
      let {
        data: { data },
      } = await TaskPilotList({ taskId: this.id });
      this.pilotList = data || [];
    },
    showTask(row) {
      let { name, task } = row;
      this.task.show = true;
      this.task.name = name;
      this.task.data = task;
    },
    setPilot(row) {
      let { id, name } = row;
      Dialog.confirm({
        title: `是否将姓名${name}选为飞手`,
      })
        .then(async () => {
          let { pilotList } = this;
          for (let i = 0; i < pilotList.length; i++) {
            let { id: pid } = pilotList[i];
            if (pid != id) {
              await TaskPilotEdit({
                id: pid,
                isMain: 0,
                taskId: this.id,
              });
            }
          }
          let { status, message } = await TaskPilotEdit({
            id,
            isMain: 1,
            taskId: this.id,
          });
          if (status === 1) {
            Toast.success(message);
            this.getTaskPilotList();
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    async handleDelPilot(row) {
      let { id, name } = row;
      Dialog.confirm({
        title: `是否取消选中姓名${name}？`,
      })
        .then(async () => {
          let { status, message } = await TaskPilotDel(id);
          if (status === 1) {
            Toast.success(message);
            this.getTaskPilotList();
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    onCopy: function (e) {
      console.log("You just copied: " + e.text);
      Toast.success("复制成功");
    },
    onError: function (e) {
      Toast.success("复制失败");
      console.log("Failed to copy texts");
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.getDetail();
    this.getTaskPilotList();
  },
};
</script>

<style lang="scss" scoped>
.pilot {
  margin-top: 0.4rem;
  padding-bottom: 1rem;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.32rem;
    font-weight: bold;
    padding: 0 0.4rem;
  }
}
.task-items {
  font-size: 0.346667rem;
  padding: 0 0.32rem;
  padding-top: 0.133333rem;
  color: #666;
}
</style>